import React from 'react'
import styles from './SideMenu.module.css'
import { sideMenuList } from './mockup'
import { Menu } from "antd";
import { HomeOutlined } from "@ant-design/icons";

export const SideMenu:React.FC = () => {
    return (
      <Menu mode="vertical" className={styles["side-menu"]}>
        {
          sideMenuList.map((item, index) => (
            <Menu.SubMenu key={`side-menu-${index}`} title={ <span><HomeOutlined />{item.title}</span> }>
              {
                item.subMenu.map((sm, smindex) => (
                  <Menu.SubMenu key={`sub-menu-${smindex}-${index}`} title={ <span><HomeOutlined />{sm.title}</span> }>
                    {
                      sm.subMenu.map((sms,smsindex) => (
                        <Menu.Item key={`sub-sub-menu-${smsindex}-${index}-${smindex}`} title={ <span><HomeOutlined />{sms}</span> }></Menu.Item>
                      ))
                    }
                  </Menu.SubMenu>
                ))
              }
            </Menu.SubMenu>
          ))
        }
      </Menu>
    )
}
